<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/custom.css" rel="stylesheet"/>
    <script src="/jquery-1.8.0.js" charset="utf-8"></script>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <!--axios ajax-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>自定义采集URL列表</title>

</head>
<body>
<br>
<div id="app">
    <form>
        添加url地址:<input v-model="inputUrl" placeholder="请输入需要爬取的URL地址">{{ inputUrl }}
        <input @click="sumbit()" type="button" value="提交">&nbsp;&nbsp;</p>
    </form>

    <!--<div>-->
    <!--<input id="deleteSelected" type="button" value="批量删除">-->
    <!--</div>-->
    <br>

    <table>
        <!--<caption>URL列表</caption>-->
        <thead><!--表格头-->
        <tr>
            <!--<th><input id="checkAll" type="checkbox"></th>-->
            <th>操作</th>
            <th>id</th> <!--加粗标题-->
            <th>页面描述</th>
            <th>url地址</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>爬取次数</th>
            <th>修改版本</th>
        </tr>
        </thead>

        <tbody><!--表格体-->
        <tr v-for="seed in seedUrls">
            <!--<td><a v-bind.href="custom/delete/url.id">删除</a>&nbsp;&nbsp;
                &lt;!&ndash;<a href="" th:value="${url.url}" onclick=spide(this)>爬取</a>&ndash;&gt;
            </td>-->
            <td><a >删除</a></td>
            <td>{{seed.id}}</td>
            <td>{{seed.description}}</td>
            <td><a :href="seed.url" target="_blank">{{seed.url}}</a></td>
            <td> {{seed.createTime}}</td>
            <td>{{seed.updateTime}}</td>
            <td> {{seed.spiderCount}}</td>
            <td>{{seed.version}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

<script>
    Vue
    vm =
        new Vue({
                el: '#app',
                data: {
                    inputUrl: '123',
                    seedUrls: [
                        {
                            id: '1',
                            description: '2'
                        }
                    ]
                },
                methods: {
                    sumbit: function () {
                        axios.post('/custom/save?url=' + this.inputUrl);
                        alert("123");
                        axios.get('/custom/list')
                            .then(function (response) {
                                // vm.$set(this.seedUrls, response.data);
                                console.log(this.seedUrls);
                                console.log(response.data);
                                this.seedUrls = response.data;
                                console.log(this.seedUrls)
                            });
                    }
                }
            }
        )
    ;


    // $(function () {
    //     spide = function (o) {
    //         var url = o.getAttribute("value");
    //         alert(url);
    //         $.ajax({
    //                 url: "/custom/spide?url=" + url,
    //                 type: "get",
    //                 async: false,
    //                 success: function (result) {
    //                     alert(result);
    //                     $("#msg").html(result);
    //                 },
    //                 error: function (result) {
    //                     alert("获取失败");
    //                     $("#msg").style = "color:red";
    //                     $("#msg").html("获取失败");
    //                 }
    //             }
    //         )
    //     }
    // })
</script>

<script>

    // var check = false;
    // $("#checkAll").click(function () {
    // // alert("click");
    // if (check == false) {
    // $("input[type='checkbox']").attr("checked", true);
    // check = true;
    // } else {
    // $("input[type='checkbox']").attr("checked", false);
    // check = false;
    // }
    // });

    // $("#deleteSelected").click(function () {
    // var ids = $("input[type='checkbox']:checked").map(function () {
    // var value = $(this).val();
    // if (value != "on") {
    // return value;
    // }
    // return;
    // }).get().join(",");
    // alert(ids);
    // window.location.href = "/custom/delete?ids=" + ids;
    // });
    //     })

</script>

</html>